<template>
  <!-- 在模板中定义一个 div 元素作为图表容器 -->
  <div ref="chart"></div>
</template>

<script setup>
// 获取数据
import {onBeforeMount,reactive } from 'vue';
import { onMounted, onBeforeUnmount, ref } from 'vue';
import router from '@/router/router';
import useCounter from '../../stores/pinia';
import {getPageCountAPI} from '@/api/page'
import { getHomeRoutesPathsAndTitles,getMenuList } from '../../router/router';

let routeTitles = [];
let routePath=[]
const newValues=[]
const counterStore=useCounter()




  getMenuList().then((list)=>{
    list.forEach(item=>{
      routePath.push(item.name)
      routeTitles.push(item.title)
    })
  })

onMounted(async() => {


  const result=await getPageCountAPI({userId:counterStore.userId})
  // console.log("从后端返回的次数",result.data)
  const data=result.data.data
  delete data.id
  const keys=Object.keys(data);
  const values=Object.values(data)
  // 让后端传过来的字段和前端从路由那获取到的字段相匹配
  routePath.forEach(key=>{
    newValues.push(data[key])
  })
  // console.log(routeTitles)
  // console.log(newValues)
  console.log()
  initChart()
});







// 导入 ECharts 库
import * as echarts from 'echarts';
import { mutable } from 'element-plus/es/utils/typescript.mjs';
// 导入 Vue 的 Composition API

// 定义用于保存 ECharts 实例的引用
const chartInstance = ref(null);
// 通过 ref 获取图表容器 DOM 元素
const chart = ref(null);

// 初始化图表的方法
function initChart() {
  // 初始化 ECharts 实例
  chartInstance.value = echarts.init(chart.value);

  // 定义图表配置选项
const  option = {
  xAxis: {
    data: routeTitles
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: newValues
    }
  ]
};

  // 设置图表选项
  chartInstance.value.setOption(option);
}

// 当组件被挂载到 DOM 后执行
// onMounted(() => {
//   initChart();
//   console.log(values)
// });

// 在组件销毁前执行
onBeforeUnmount(() => {
  // 清除图表实例以释放资源
  if (chartInstance.value) {
    chartInstance.value.dispose();
  }
});
</script>

<style scoped>
div{
  width: 100%;
  height: 100%;
}
</style>
